<template>
  <div class="navtype">
    <div class="navtype-line">
      <!-- 版心 -->
      <div class="navtype-wrap">
        <!-- 上侧导航栏 -->
        <div class="list-wrap">
          <div class="all-list">全部商品分类</div>
          <ul class="other-list">
            <li>
              <router-link to="/">服装城</router-link>
            </li>
            <li>
              <router-link to="/">美妆馆</router-link>
            </li>
            <li>
              <router-link to="/">尚品汇超市</router-link>
            </li>
            <li>
              <router-link to="/">全球购</router-link>
            </li>
            <li>
              <router-link to="/">闪购</router-link>
            </li>
            <li>
              <router-link to="/">团购</router-link>
            </li>
            <li>
              <router-link to="/">有趣</router-link>
            </li>
            <li>
              <router-link to="/">秒杀</router-link>
            </li>
          </ul>
        </div>
      </div>
    </div>
    <!-- 左侧菜单栏 版心 -->
    <div class="navtype-wrap">
      <!--  -->
      <div class="navlist" @click="toSearch">
        <!-- 一级菜单 -->
        <div class="item" v-for="c1 in baseCategoryList" :key="c1.categoryId">
          <h3>
            <a
              :data-name="c1.categoryName"
              :data-id="c1.categoryId"
              data-level="1"
            >
              {{ c1.categoryName }}
            </a>
          </h3>

          <div class="navlist-all">
            <!-- 二级菜单 -->
            <div
              class="item-list2"
              v-for="c2 in c1.categoryChild"
              :key="c2.categoryId"
            >
              <dl class="navlist-hid">
                <dt>
                  <a
                    :data-name="c2.categoryName"
                    :data-id="c2.categoryId"
                    data-level="2"
                  >
                    {{ c2.categoryName }}
                  </a>
                </dt>
                <!-- 三级菜单 -->
                <dd>
                  <em v-for="c3 in c2.categoryChild" :key="c3.categoryId">
                    <a
                      :data-name="c3.categoryName"
                      :data-id="c3.categoryId"
                      data-level="3"
                    >
                      {{ c3.categoryName }}
                    </a>
                  </em>
                </dd>
              </dl>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
// import { reqGetBaseCategoryList } from '@/api/home'
import { mapState, mapActions } from 'vuex'
export default {
  name: 'NavType',
  computed: {
    ...mapState('home', ['baseCategoryList']),
  },
  methods: {
    ...mapActions('home', ['getBaseCategoryList']),
    toSearch(event) {
      // 用事件委托给a标签添加点击跳转事件
      // console.log(event.target.dataset)
      const { name, id, level } = event.target.dataset
      //判断是否有自定义属性,没有不跳
      if (!name) {
        return
      }
      // 编程式导航,携带数据跳转
      this.$router.push({
        name: 'Search',
        query: {
          categoryName: name,
          [`category${level}Id`]: id,
        },
      })
    },
  },
  async mounted() {
    this.getBaseCategoryList()
  },
}
</script>

<style lang="less" scoped>
.navtype-wrap {
  width: 1200px;
  margin: 0 auto;
}
.navtype-line {
  border-bottom: 2px solid red;
}
.list-wrap {
  overflow: hidden;
  .all-list {
    float: left;
    height: 45px;
    width: 210px;
    line-height: 45px;
    text-align: center;
    background-color: red;
    font-size: 14px;
    font-weight: bold;
    color: #fff;
  }
  .other-list {
    float: left;
    display: flex;
    height: 45px;
    li {
      // width: 100px;
      padding: 0 22px;
      line-height: 45px;
      text-align: center;
      font-size: 16px;
    }
  }
}
.navlist {
  float: left;
  position: relative;
  border: 1px solid pink;
  width: 210px;
  height: 460px;
  margin-top: 5px;
  background-color: #fafafa;
  h3 {
    font-size: 14px;
    padding-left: 20px;
    height: 30px;
    line-height: 30px;
    a {
      display: block;
    }
    &:hover {
      background-color: pink;
    }
  }
  .navlist-all {
    display: none;
    position: absolute;
    left: 210px;
    top: 0px;
    height: 460px;
    width: 720px;
    background-color: rgb(240, 239, 239);
    // border: 1px solid green;
    z-index: 999 !important;
    // .item-list2 {
    //   float: left;
    //   // border: 1px solid blue;
    // }
  }
  .item:hover {
    .navlist-all {
      display: block;
    }
  }
}
.navlist-hid {
  display: flex;
  zoom: 1;
  dt {
    margin: 10px 0px 10px 10px;
    padding-right: 10px;
    border-right: 1px solid #ccc;
  }
  dd {
    margin: 10px 0;
    em {
      border-right: 1px solid #ccc;
      a {
        padding: 0 15px;
      }
      &:last-child {
        border-right: none;
      }
    }
  }
  dt {
    font-weight: bold;
  }
}
</style>
